<template>
  <div class="my-account">
    <div class="account-card">
      <div class="close-button">✕</div>
      <h2 class="section-title">我的服务</h2>
      
      <!-- 服务列表区域 -->
      <div class="services-section">
        <div class="services-container">
          <service-card
            v-for="service in userServices"
            :key="service.id"
            :service="service"
          ></service-card>
        </div>
      </div>

      <!-- 客服公告 -->
      <div class="service-notice">
        <div class="notice-content">
          <i class="el-icon-warning-outline"></i>
          <span>如您有任何疑问，请点击"联系客服"进入最新客服账号，客服账号永不断联。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ServiceCard from '@/components/ServiceCard.vue'

import { getUserServices } from '@/api/service'

export default {
  name: 'MyAccountView',
  components: {
    ServiceCard
  },
  data() {
    return {
      userServices: []
    }
  },
  mounted() {
    this.getUserServices()
  },
  methods: {
    getUserServices() {
      getUserServices().then(response => {
        this.userServices = response.data

        this.userServices.forEach(service => {
          service.logo = require(`@/assets/home/${service.logo}-logo.png`)
          service.bgImage = require(`@/assets/home/${service.bgImage}-bg.png`)
        })
      })
    }
  }
}
</script>

<style scoped>
.my-account {
  min-height: 50vh;
  padding: 40px 20px;
  background: #F8F9FA;
  display: flex;
  justify-content: center;
}

.account-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  width: 100%;
  max-width: 1060px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
}

.close-button {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #3F5D62;
  transition: all 0.3s ease;
}

.close-button:hover {
  transform: rotate(90deg);
}

.section-title {
  font-size: 2rem;
  color: #3F5D62;
  margin-bottom: 30px;
  text-align: left;
}

.services-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.service-notice {
  padding: 20px 25px;
  background: linear-gradient(to right, #FFF9E6, #FFF5D6);
  border-radius: 12px;
  border: 1px solid rgba(230, 162, 60, 0.15);
  box-shadow: 0 2px 12px rgba(230, 162, 60, 0.1);
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

.notice-content i {
  color: #E6A23C;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .services-container {
    justify-content: center;
  }
  
  .service-card {
    width: 48%;
  }
}

@media (max-width: 768px) {
  .service-card {
    width: 100%;
  }
}
</style>